<template>
  <div>
    <div class="add-todo">
      <input
        type="text"
        placeholder="请输入您的任务名称,按回车确认"
        @keydown.enter="addTodo"
      />
    </div>
  </div>
</template>
  
  <script>
    // 引入组件
import { nanoid } from "nanoid";
export default {
  // 设置标签名字
  name: "AddTodo",
  // 传入参数
  props: ["add"],
  methods: {
    addTodo(ev) {
      // 点击执行生成一个对象
      let content = ev.target.value;
      let todo = { id: nanoid(), content, isdone: false };
      // 回调父组件方法传参改变数据
      this.add(todo);
    },
  },
};
</script>
  
  <style lang='stylus' scoped>
  .add-todo input {
    width: 10%;
    height: 35px;
  }
</style>
  